<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			//window.onload=function(){
				
			
			function th(node1,node2){
					//获取node1和node2父类节点
				var node1Parent=node1.parentNode;
			    var node2Parent=node2.parentNode;
					if (node1Parent&&node2Parent) {
					
					//克隆node1和node2
			var clone1=node1.cloneNode(true);
			var clone2=node2.cloneNode(true);
			   
			node1Parent.replaceChild(clone2,node1)
			 node2Parent.replaceChild(clone1,node2)
			 }else{
			 	console.log("交换失败");
			 	return;
			 }
			 }
			
			//}
		</script>
	</head>
	<body>
		<p>你喜欢哪个城市</p>
		<ul id="city">
			<li id="bj" name="BeiJing" onclick="th(bj,rl)">北京</li>
			<li id="sh" onclick="th(sh,sk)">上海</li>
			<li id="dj" onclick="th(dj,fc)">东京</li>
			<li id="sr" onclick="th(sr,ms)">首尔</li>
		</ul>
		
		<br><br>
		<p>你喜欢哪款单机游戏?</p>
		<ul id="game">
			<li id="rl" onclick="th(rl,bj)">红警</li>
			<li id="sk" onclick="th(sk,sh)">实况</li>
			<li id="fc" onclick="th(fc,dj)">极品飞车</li>
			<li id="ms" onclick="th(ms,sr)">魔兽</li>
		</ul>
	</body>
</html>
